<template>
	<div id="templateDetail" v-loading="loading">
		<div class="title"><a class="backPage iconfont icon-icon-test" @click="$router.back(-1)"></a>用户模板详情</div>
		<template v-if="detail">
			<el-form class="form" label-position="top">
				<el-row :gutter="40" class="other">
					<el-col :span="6">
						<el-form-item label="模板名称">
							<el-input v-model.trim="detail.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="做任务限时,分钟">
								<div class="disbox">
									<el-input v-model.trim="detail.limited_time" class="disflex"></el-input>
								</div>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="派单人审核时间,分钟">
								<div class="disbox">
									<el-input v-model.trim="detail.limited_time_approve" class="disflex"></el-input>
								</div>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="任务截至过期,小时">
								<div class="disbox">
									<el-input v-model.trim="detail.deadline_time" class="disflex"></el-input>
								</div>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="可接设备">
								<div class="disbox">
										<el-checkbox-group :min="1" v-model="detail.limited_os" class="disflex">
											<el-checkbox label="1">苹果</el-checkbox>
											<el-checkbox label="2">安卓</el-checkbox>
									</el-checkbox-group>
								</div>
							</el-form-item>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<task-step mode="userTemplate" :uploadBids="bids" :taskSteps="detail.custom_steps" />
			<el-button @click="updateTemplate" type="primary" :style="{'margin-top':'30px','margin-left':(detail.custom_steps.length==0?'':'45px')}">立即保存</el-button>
		</template>
	</div>
</template>

<script>
import TaskStep from '@/components/taskStep';
import fetch from '@/api/axios';
export default {
	components:{
		'task-step': TaskStep
	},
	data() {
		return {
			id: 0,
			detail: null,
			bids: [],
			loading: false,
		}
	},
	created(){
		this.id = parseInt(this.$route.query.id);
		this.getDetail();
	},
	methods: {
		getDetail(){
			let _this = this;
			this.loading = true;
			fetch.get('/api/console/task/templateldetail',{
				id: this.id
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.detail = data.data.result;
				}else{
					_this.$message.error(data.message);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		updateTemplate(){
			let _this = this;
			let update_data = {...this.detail};
			update_data.custom_steps = JSON.stringify(update_data.custom_steps);
			update_data.bids = this.bids;
			this.loading = true;

			fetch.post('/api/console/task/templateldetail', {
				id: _this.id,
				update_data: update_data,
				bids: _this.bids,
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					_this.$message.success(data.data.info);
					_this.getDetail();
				}else{
					_this.$message.error(data.data.info);
				}
			}).catch(err=>{
				_this.$message.error(err);
			}).finally(()=>{
				_this.loading = false;
			});
		},
	},
	mounted() {

	}
}
</script>
<style lang="scss" scoped>
.form{
	margin-top:30px;
	border-top:1px solid #FFF;
}
.titles{
	margin-top:25px;
	margin-bottom:12px;
	font-size:19px;
}
</style>